<template>
    <div class="wrap">
        <div class="container">
            <TopBreadCrumb></TopBreadCrumb>
            <div class="user_center_content">
                <!-- 左侧菜单 -->
                <LeftNavMenu></LeftNavMenu>
                <!-- 左侧菜单结束 -->
                <!-- 右侧内容开始  -->
                <div class="right_user_content">
                    <div class="right-title">
                        <div class="left">货物明细</div>
                    </div>
                    <div class="contract-content">
                        <div class="contract-list cargo-detail">
                            <el-table
                                :data="listData"
                                style="width: 100%">
                                <el-table-column
                                    prop="name"
                                    label="货物信息"
                                    width="350">
                                    <template slot-scope="scope">
                                        <div class="goods_spec_info">
                                            <div class="goods_name">{{scope.row.name}}</div>
                                            <div>型号：{{scope.row.model}}</div>
                                            <div>规格：{{scope.row.specification}}</div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="remark"
                                    label="备注"
                                    align="left"
                                    >
                                </el-table-column>
                                <el-table-column
                                    prop="quantity_owed"
                                    label="欠货数量(件)"
                                    align="center"
                                    width="150">
                                </el-table-column>
                                <el-table-column
                                    prop="amount_owed"
                                    label="欠货金额(元)"
                                    align="center"
                                    width="150">
                                </el-table-column>
                                <el-table-column
                                    prop="delivery_time"
                                    label="预计发货时间"
                                    align="center"
                                    width="150">
                                </el-table-column>
                                <el-table-column
                                    prop="order_time"
                                    label="下单时间"
                                    align="center"
                                    width="150">
                                </el-table-column>
                            </el-table>

                        </div>
                        <Custom-pagination></Custom-pagination>
                    </div>
                </div>
                <!-- 右侧内容结束 -->
            </div>
        </div>
    </div>
</template>

<script>
import $ from "jquery"
import CustomPagination from '../../components/CustomPagination.vue';

  export default {
    components: { CustomPagination },
    data() {
        return {
            listData: [{
                name: '同种异体肌腱',
                model: "200x20x5mm",
                specification: "150680431530 ",
                remark: '多种产品规格 满足临床不同 需求。',
                quantity_owed: '200',
                amount_owed: "4000.00",
                delivery_time: "2023-05-31",
                order_time: "2023-05-10"

            }, {
                name: 'EH复合材料(颅颌优)',
                model: "200x20x5mm",
                specification: "150680431530 ",
                remark: '多种产品规格 满足临床不同 需求。',
                quantity_owed: '200',
                amount_owed: "4000.00",
                delivery_time: "2023-05-31",
                order_time: "2023-05-10"
            }, {
                name: '同种骨植入材料',
                model: "200x20x5mm, 200x20x5mm, 200x20x5mm",
                specification: "150680431530 ",
                remark: '多种产品规格 满足临床不同 需求。',
                quantity_owed: '200',
                amount_owed: "4000.00",
                delivery_time: "2023-05-31",
                order_time: "2023-05-10"
            }, {
                name: '同种异体肌腱价格备案合同',
                model: "200x20x5mm",
                specification: "150680431530 ",
                remark: '多种产品规格 满足临床不同 需求。',
                quantity_owed: '200',
                amount_owed: "4000.00",
                delivery_time: "2023-05-31",
                order_time: "2023-05-10"
            }]
        };
    },
    methods: {
    },
    mounted: function(){
        

    }

  };
</script>
<style>


</style>